<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="author" content="wa">
    <title></title>
    <script src="../js/jquery-3.1.1.js"></script>
    <style>
        .box{
            width: 583px;
            margin: 10px auto;
            /*background-color: red;*/
        }
        .box h2{
            margin: 10px;
            float: left;
        }
        .box span{
            margin: 15px;
            float: right;
        }
        .box #atext{
            font-size: 16px;
            padding: 5px;
            background-color: #f8f5f8;
        }
        .box strong{
            color: red;
        }
    </style>
</head>
<body>
    <div class="box">
        <h2>有什么新鲜事告诉大家</h2>
        <span>您还可以输入<strong>150</strong>字</span>
        <textarea name="" id="atext" cols="70" rows="10" placeholder="您想说点什么？"></textarea>
    </div>
</body>
</html>
<script>

    $(function(){
        $('.box #atext').keyup(function(){
            // 点击按键，触发事件    获取输入的长度
            var txtleng=$('#atext').val().length;
            console.log(txtleng);

            if(txtleng>150){
                // 当值超出指定数时让strong显示为0
                $('.box strong').text('0');
                // 截取指定字符内的值
                var changdu=$('.box #atext').val().substring(0,150);

                // $('.box #atext').val(changdu);
            }else{
                // 显示减去的字符的长度
                $('.box strong').text(150-txtleng);
            }

        });
    });

</script>